<template>
	<div class="appWraper">
		<div class="leftWraper" :class="isCollapse? 'fold':'unfold'">
			<div class="logoWraper">
				<div class="logo"><img src="@/assets/logo.png" width="100%" height="100%" /></div>
				<div class="logoTitle" v-if="!isCollapse">通用管理后台</div>
			</div>
			<div class="navWraper">
				<el-menu :default-active="activeNavMenu" :collapse="isCollapse" background-color="#2c3e50"
					text-color="#c3c3c3" style="border: none;">
					<router-link to="/">
						<el-menu-item index="">
							<el-icon>
								<Menu />
							</el-icon>
							<template #title>主页</template>
						</el-menu-item>
					</router-link>

					<el-sub-menu index="chinse">
						<template #title>
							<el-icon>
								<Edit />
							</el-icon>
							<span>语文管理</span>
						</template>
						<router-link to="/chinese/grade">
							<el-menu-item index="chinese-grade">
								<el-icon>
									<Edit />
								</el-icon>
							年级管理</el-menu-item>
						</router-link>
						<el-menu-item index="chinese-jiaocai">
							<el-icon>
								<Edit />
							</el-icon>教材管理
						</el-menu-item>
						<el-menu-item index="chinese-content">
							<el-icon>
								<Edit />
							</el-icon>
							内容管理</el-menu-item>
					</el-sub-menu>

					<el-sub-menu index="3">
						<template #title>
							<el-icon>
								<Edit />
							</el-icon>
							<span>英语管理</span>
						</template>
						<el-menu-item index="3-1">年级管理</el-menu-item>
						<el-menu-item index="3-2">教材管理</el-menu-item>
						<el-menu-item index="3-2">教材管理</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="4">
						<template #title>
							<el-icon>
								<Edit />
							</el-icon>
							<span>英语管理</span>
						</template>
						<el-menu-item index="4-1">年级管理</el-menu-item>
						<el-menu-item index="4-2">教材管理</el-menu-item>
						<el-menu-item index="4-2">教材管理</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="5">
						<template #title>
							<el-icon>
								<Setting />
							</el-icon>
							<span>系统设置</span>
						</template>
						<el-menu-item index="8-1">年级管理</el-menu-item>
						<el-menu-item index="8-2">教材管理</el-menu-item>
						<el-menu-item index="8-3">教材管理</el-menu-item>
						<el-menu-item index="8-4">年级管理</el-menu-item>
						<el-menu-item index="8-5">教材管理</el-menu-item>
						<el-menu-item index="8-6">教材管理</el-menu-item>
						<el-menu-item index="8-7">年级管理</el-menu-item>
						<el-menu-item index="8-8">教材管理</el-menu-item>
						<el-menu-item index="8-9">教材管理</el-menu-item>
					</el-sub-menu>

				</el-menu>
			</div>
			<div class="leftFooter">
				<div>&copy;2025 北京安之谷科技有限公司</div>
			</div>
		</div>
		<!--右侧-->
		<div class="rightWraper">
			<div class="headerWraper">
				<div style="flex: 1; display:flex;">
					<div class="toggleBtn" @click="isCollapse=!isCollapse">
						<el-icon size="25" v-if="isCollapse">
							<Expand />
						</el-icon>
						<el-icon size="25" v-if="!isCollapse">
							<Fold />
						</el-icon>
					</div>
				</div>

				<div>
					右侧
				</div>
			</div>
			<div class="content-wraper">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	import { onBeforeRouteUpdate } from 'vue-router';
import router from '@/router';
	export default {
		 setup() {
		    onBeforeRouteUpdate((to, from) => {
		      console.log('路由从', from.path, '更新为', to.path);
			  document.title="Eplus"+(to.meta?to.meta.title:"");
		
		    });
		  },
		  mounted() {
			  var routerName=router.currentRoute.value.path.replace('/','');
			  routerName=routerName.replaceAll("/",'-');
			  this.activeNavMenu=routerName;
		  },
		data() {
			return {
				isCollapse: false,
				activeNavMenu: 'dashboard'
			}
		}
	}
</script>

<style scoped>
	.appWraper {
		display: flex;
	}

	.logoWraper {
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
		background-color: #2c3e50;
		border-bottom: 1px solid #364c62;
	}

	.logo {
		width: 30px;
		height: 30px;
	}

	.leftWraper {
		width: 200px;
		background-color: #2c3e50;
		overflow: hidden;
	}

	.navWraper {
		height: calc(100vh - 80px);
		overflow: hidden;
		overflow-y: auto;
	}

	.leftFooter {
		color: #8a8a8a;
		pointer-events: none;
		user-select: none;
		text-align: center;
		appearance: none;
		padding-top: 10px;
		height: 80px;
		-webkit-appearance: none;
		font-size: 12px;
	}

	::-webkit-scrollbar {
		width: 0px;
	}

	.fold {
		width: 64px;
		transition: 0.2s;
	}

	.unfold {
		transition: 0.2s;
	}

	.rightWraper {
		flex: 1;
	}

	.headerWraper {
		display: flex;
		height: 45px;
		line-height: 45px;
		border-bottom: 1px solid #EEEEEE;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
	}

	.toggleBtn {
		padding: 2px 5px 8px 5px;
		margin: 6px;
		border-radius: 10px;
		cursor: pointer;
		color: #4c4c4c;
	}

	.toggleBtn:hover {
		color: #393939;
	}

	.content-wraper {
		width: 100%;
		height: calc(100vh - 45px);

		overflow: hidden;
		overflow-y: auto;
		padding: 5px 0px;
		box-sizing: border-box;
	}


	.el-menu-item {
		height: 45px;
		line-height: 45px;
		user-select: none;
	}

	.el-sub-menu {
		line-height: 45px;
	}

	.el-sub-menu>>>.el-sub-menu__title {
		height: 45px !important;
		line-height: 45px !important;
	}

	.el-menu-item.is-active {
		color: #f4f4f4;
		background-color: #0080ff !important;
	}
</style>